<template>
  <view class="login-container">
    <view class="login-content">
      <!-- Logo区域 -->
      <view class="logo-area">
        <image class="logo-image" :src="logoUrl" mode="aspectFit" />
        <text class="welcome-text">欢迎来到BJD世界</text>
      </view>
      <!-- 展示区域 -->
      <view class="showcase-area">
        <image class="showcase-image" :src="showcaseUrl" mode="aspectFit" />
        <text class="slogan-text">遇见独一无二的BJD精灵</text>
      </view>
      <!-- 登录按钮区域 -->
      <view class="login-area">
        <button class="wechat-login-btn" @click="handleWechatLogin">
          <uni-icons type="weixin" size="28" color="#ffffff" />
          <text class="btn-text">微信一键登录</text>
        </button>
      </view>
      <!-- 协议区域 -->
      <view class="agreement-area">
        <text class="agreement-text">登录即代表同意</text>
        <text class="agreement-link" @click="handleUserAgreement">《用户协议》</text>
        <text class="agreement-text">和</text>
        <text class="agreement-link" @click="handlePrivacyPolicy">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { appLoginApi } from '@/api/business/bjd/app-login-api';
import { useUserStore } from '@/store/modules/system/user';
import { USER_TOKEN } from '@/constants/local-storage-key-const';
const router = useRouter();
const userStore = useUserStore();



const logoUrl = 'https://bjd-prod.oss-cn-hangzhou.aliyuncs.com/login_logo.jpg';
const showcaseUrl = 'https://bjd-prod.oss-cn-hangzhou.aliyuncs.com/login_head1.jpg';
const handleWechatLogin = async () => {

  uni.login({
    provider: 'weixin',
    success: async (loginRes) => {
      console.log(loginRes.code);
      // 处理微信登录逻辑
      const param = {
        code: loginRes.code
      }
      const loginInfo = await appLoginApi.wxLogin(param);
      console.log("loginInfo",loginInfo.data);
      const loginRsp = loginInfo.data;
      
      if(loginRsp.token != null) {
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });
          // 存储token
          uni.setStorageSync(USER_TOKEN, loginRsp.token);
          
          // 跳转到首页
          uni.switchTab({ url: '/pages/home/index' });

      } else {
        uni.showToast({
          title: '登录失败',
          icon:'none'
        });
      }

    },
    fail: (err) => {
      uni.showToast({
        title: '登录失败，请重试',
        icon: 'none'
      });
    }
  });
};

 function decryptPhoneNumber(e) {
  console.info(e.detail);
 }
const handleUserAgreement = () => {
// 处理用户协议点击事件
  uni.navigateTo({
    url: '/pages/agreement/user'
  });
};
const handlePrivacyPolicy = () => {
// 处理隐私政策点击事件
  uni.navigateTo({
    url: '/pages/agreement/privacy'
  });
};
</script>
<style>
page {
  height: 100%;
}
.login-container {
  height: 100%;
  background-color: #FFF5F5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-content {
  width: 100%;
  padding: 0 40rpx;
  box-sizing: border-box;
}
.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}
.logo-image {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 20rpx;
}
.welcome-text {
  font-size: 24px;
  color: #333333;
  font-weight: bold;
}
.showcase-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 80rpx;
}
.showcase-image {
  width: 600rpx;
  height: 400rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.slogan-text {
  font-size: 20px;
  color: #666666;
}
.login-area {
  margin-bottom: 40rpx;
}
.wechat-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #07C160;
  border-radius: 20rpx;
  height: 88rpx;
  margin: 0;
}
.wechat-login-btn:active {
  opacity: 0.8;
}
.btn-text {
  color: #FFFFFF;
  font-size: 16px;
  margin-left: 20rpx;
}
.agreement-area {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
.agreement-text {
  font-size: 14px;
  color: #999999;
}
.agreement-link {
  font-size: 14px;
  color: #FF9999;
}
.agreement-link:active {
  opacity: 0.8;
}
</style>
